/* eslint-disable eqeqeq */
/* eslint-disable no-unused-vars */
import React from 'react'
import PropTypes from 'prop-types'
import { Link } from 'umi'
import { withI18n } from '@lingui/react'
import { publicIp } from '@/services/apiIp'
import {
  Row,
  Card,
  Form,
  Input,
  Button,
  Col,
  Table,
  Modal,
  Image,
  message,
} from 'antd'
import Pagination from '@/utils/Pagination'
import { layoutlist, success } from '@/utils/helper'
import styles from './index.less'
import { post, get, Delete } from '@/services/https'
import { Unite } from '@/utils/Unite'
import ImageWithTokenlist from '@/plugins/ImageWithTokenlist'
import ImageWithTokenBig from '@/plugins/ImageWithTokenBig'
import VeWithToken from '@/plugins/veWithToken'
import PdfWithToken from '@/plugins/pdfWithToken'

const confirm = Modal.confirm
@withI18n()
class Command extends React.Component {
  formRef = React.createRef()
  state = {
    keys: [],
    setIsModalVisible: false, //弹框
    from: {},
    total: 0, //总页数
    current: 1,
    pageSize: 10,
    user_name: '',
    dataSource: [],
    selectId: [],
    visible: false,
    items: {
      resource_type: 1,
      resource_content: '',
    },
  }

  //初始化时自调用一次，用于请求借口数据
  componentDidMount() {
    this.onChangeCurPageOrPageSize(1, 10)
  }
  onAddgt = () => {
    this.props.history.push('/strategy/Resources/0')
  }
  handleMenuClick = (status) => {}
  getData = (current, pageSize) => {
    let data = {
      ...this.state.from,
      page_index: current,
      page_size: pageSize,
    }
    post('resource/private/list', data).then((res) => {
      this.setState({ dataSource: res.data, total: res.size })
    })
  }

  handleDel = () => {
    post('resource/delete', this.state.selectId).then((res) => {
      const { location, i18n } = this.props
      if (res.code === 0) {
        message.success(i18n.t`Deleds`)
        this.onChangeCurPageOrPageSize(1, 10)
      } else {
        message.error(res.info)
      }
    })
  }
  searchBtn = (e) => {
    e && e.preventDefault()
    this.onChangeCurPageOrPageSize(1, this.state.pageSize)
  }

  handleReset = () => {
    this.setState({ from: {} })
    this.formRef.current.resetFields()
    let that = this
    setTimeout(function () {
      that.getData(1, 10)
    }, 500) //延时10秒
  }
  onChangeCurPageOrPageSize = (current, pageSize) => {
    this.setState(
      () => ({ current, pageSize }),
      () => {
        this.getData(current, pageSize)
      }
    )
  }
  showConfirm = () => {
    let that = this
    const { location, i18n } = this.props
    confirm({
      title: i18n.t`Are-delete`,
      content: i18n.t`reversible`,
      onOk() {
        that.handleDel()
      },
    })
  }
  handsearch = (values) => {
    this.setState({ from: values })
    this.getData(1, 10)
  }
  handleChange = (event) => {
    this.setState({ user_name: event.target.value })
  }
  handlFen = (item) => {
    if (item.resource_type === 3) {
      window.open(item.resource_content)
    } else if (item.resource_type === 2) {
      this.setState({ visible: true, items: item })
    } else {
      this.setState({ visible: true, items: item })
    }
    console.log(item)
  }
  handleOk = () => {
    if (this.ChildPage && this.state.items.course_type === 1) {
      this.ChildPage.fat('调用子组件的 editRowEvt 方法')
    }
    this.setState({
      visible: false,
      items: {
        resource_type: 1,
        resource_content: '',
      },
    })
  }
  handleCancel = () => {
    if (this.ChildPage && this.state.items.course_type === 1) {
      this.ChildPage.fat('调用子组件的 editRowEvt 方法')
    }
    this.setState({
      visible: false,
      items: {
        resource_type: 1,
        resource_content: '',
      },
    })
  }
  handleChildEvent = (ref) => {
    this.childRef = ref
  }
  render() {
    const { i18n } = this.props
    const { dataSource, selectId, account_type, items } = this.state
    const columns = [
      {
        title: '资源名称',
        dataIndex: 'resource_name',
        key: 'resource_name',
        width: 170,
        align: 'center',
        render: (text, record) => {
          return <Link to={`/strategy/Resources/${record.id}`}>{text}</Link>
        },
      },
      {
        title: '资源类型',
        width: 120,
        dataIndex: 'resource_type',
        key: 'resource_type',
        align: 'center',
        render: (text, record) => {
          if (text == 1) {
            return 'MP4视频 '
          } else if (text == 2) {
            return 'PDF文档'
          } else if (text == 3) {
            return '网站链接'
          } else if (text == 4) {
            return '图片(JPG/JPEG/PNG)'
          }
        },
      },
      {
        title: '资源标签',
        width: 120,
        dataIndex: 'resource_label',
        key: 'resource_label',
        align: 'center',
      },
      {
        title: '资源图片',
        width: 90,
        dataIndex: 'resource_logo',
        key: 'resource_logo',
        align: 'center',
        render: (text, record) => {
          return <ImageWithTokenlist key={1} src={text} />
        },
      },
      {
        title: '资源描述',
        width: 170,
        dataIndex: 'resource_desc',
        key: 'resource_desc',
        align: 'center',
      },
      {
        title: '操作',
        width: 170,
        dataIndex: 'class_desc',
        key: 'class_desc',
        align: 'center',
        render: (text, record) => {
          return (
            <Button type="link" onClick={() => this.handlFen(record)}>
              访问资源
            </Button>
          )
        },
      },
    ]

    let rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        this.setState({ selectId: selectedRowKeys })
      },
      getCheckboxProps: (record) => ({}),
    }
    return (
      <div className="ct">
        <div className="ban">
          <div className="tetli">我的资源</div>
          <div
            style={{
              width: '60px',
              height: '6px',
              background:
                'linear-gradient( 270deg, rgba(37,111,254,0) 0%, #256FFE 100%)',
            }}
          ></div>
          <Form
            className="forms"
            {...layoutlist}
            ref={this.formRef}
            onFinish={this.handsearch}
          >
            <div>
              <Form.Item
                className={styles.antBut}
                label="资源名称"
                name="resource_name"
              >
                <Input style={{ width: '300px' }} placeholder="搜索资源名称" />
              </Form.Item>
            </div>
            <div>
              <Button type="primary" htmlType="submit" className={styles.Po_Le}>
                {i18n.t`Search`}
              </Button>
              <Button
                style={{ marginLeft: '12px' }}
                className={styles.Po_Le}
                onClick={this.handleReset}
              >
                {i18n.t`Reset`}
              </Button>
            </div>
          </Form>
          <div className="add">
            <Button type="primary" onClick={this.onAddgt}>
              {i18n.t`add`}
            </Button>
            <Button
              type="default"
              onClick={this.showConfirm}
              style={{ marginLeft: '12px' }}
              disabled={selectId.length > 0 ? false : true}
            >
              {i18n.t`Delent`}
            </Button>
          </div>
        </div>
        <Row>
          <Table
            rowClassName={(record, i) => (i % 2 === 1 ? 'even' : 'odd')}
            rowKey="id"
            rowSelection={rowSelection}
            style={{
              width: '100%',
              boxShadow: '0px -4px 8px 0px rgba(0,57,147,0.08)',
            }}
            bordered
            dataSource={dataSource}
            columns={columns}
            pagination={false}
          />

          <Pagination
            current={this.state.current}
            pageSize={this.state.pageSize}
            total={this.state.total}
            handleChange={this.onChangeCurPageOrPageSize} //当前页及条数改变都会从子组件触发此方法，用于传递页码和条数
            pageSizeOptions={['10']} // 针对不同的组件需求传递每次多少条，不传已在分页组件写默认值了
          ></Pagination>
        </Row>
        <Modal
          width={
            items.resource_type == 1
              ? '40%'
              : items.resource_type == 2
              ? '80%'
              : '40%'
          }
          title="课程内容"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          {/* 视频 */}
          {items.resource_type == 1 ? (
            <div>
              <VeWithToken
                onRef={(c) => (this.ChildPage = c)}
                key={items.id}
                src={items.resource_content}
              />
            </div>
          ) : (
            ''
          )}
          {/* pdf文档 */}
          {items.resource_type == 2 ? (
            <div>
              <PdfWithToken key={items.id} src={items.resource_content} />
            </div>
          ) : (
            ''
          )}
          {/*  */}
          {items.resource_type == 3 ? <div></div> : ''}
          {/* 图片 */}
          {items.resource_type == 4 ? (
            <div>
              <ImageWithTokenBig key={items.id} src={items.resource_content} />
            </div>
          ) : (
            ''
          )}
        </Modal>
      </div>
    )
  }
}
Command.propTypes = {
  post: PropTypes.object,
  // loading: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
}
export default Command
